<template>
  <view clss="page">
    <scroll-view style="height: 100%" @scrolltolower="getList" scroll-y="true" lower-threshold="100px"
                 scroll-with-animation="true">
      <view class="show-calendar-banner"></view>
      <view class="show-calendar-main">
        <view class="filter-panel-wrap">
          <scroll-view class="scroll-view" scroll-x="true">
            <view class="calendar-bar">
              <view v-for="(item,index) in DateData" @click="selected(item.date)" :key="index"
                    :class="['scroll-view-item', getItemClass(item.date)]">
            <span class="week">
             {{ item.week }}
            </span>
                <span class="day">
             {{ item.day }}
              </span>
              </view>
            </view>
          </scroll-view>
          <uni-icons @click="openCalender" type="calendar" size="30" style="margin-top: 35rpx"></uni-icons>
        </view>
        <concertList :concertList="concertList" :hasMore="hasMore" :loading="loading"></concertList>
      </view>
      <uni-calendar
          :start-date="today"
          :end-date="lastDay"
          ref="calendar"
          :insert="false"
          @confirm="confirm"
          :range="true"
      />

    </scroll-view>
  </view>
</template>

<script>
import {getConcertList} from "../../api/user/concert";
import concertList from "../../uni_modules/uni-badge/components/concert-list/concert-list.vue";
import {format2StandardDateStr} from "../../utils/DateUtils";

export default {
  components: {concertList},
  data() {
    return {
      today: '',
      lastDay: '',
      startDate: '',
      endDate: '',
      DateData: [],
      concertList: [],
      hasMore: true,
      loading: false,
      condition: {
        pageNum: 1,
        pageSize: 5,
      },
    }
  },
  created() {
    const today = new Date();
    this.today = today.getFullYear() + '-' + (today.getMonth() + 1) + "-" + today.getDate();
    const halfYearLater = new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
    this.lastDay = halfYearLater.getFullYear() + '-' + (halfYearLater.getMonth() + 1) + "-" + halfYearLater.getDate();
    const dateObjects = [];
    while (today <= halfYearLater) {
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const weekDay = weekDays[today.getDay()];
      const year = today.getFullYear();
      const month = today.getMonth() + 1;
      const day = today.getDate();
      dateObjects.push({week: weekDay, day: month + '.' + day, date: year + "-" + month + "-" + day});
      today.setDate(today.getDate() + 1);
    }
    this.DateData = dateObjects;
    this.init();
  },
  methods: {
    init() {
      // 重新获取页面数据
      this.concertList = [];
      this.hasMore = true;
      this.loading = false;
      this.condition = {
        pageNum: 1,
        pageSize: 5,
      }
      this.getList();
    },
    getList() {
      if (!this.hasMore || this.loading) return;
      this.loading = true;
      // 加上时间参数
      if (this.startDate.length !== 0 && this.endDate.length !== 0) {
        let start = this.startDate.split('-');
        let end = this.endDate.split('-');
        this.condition.queryStartTime = format2StandardDateStr(new Date(start[0], start[1] - 1, start[2]));
        this.condition.queryEndTime = format2StandardDateStr(new Date(end[0], end[1] - 1, end[2]));
      }
      getConcertList(this.condition).then(res => {
        this.concertList = [...this.concertList, ...res.data.rows]
        this.hasMore = this.condition.pageNum * this.condition.pageSize <= res.data.total;
        ++this.condition.pageNum;
        this.loading = false;
      })
    },
    openCalender() {
      this.$refs.calendar.open();
    },
    selected(date) {
      if (this.startDate.length === 0) {
        this.startDate = date;
        this.endDate = date;
      } else if (date !== this.startDate && this.startDate === this.endDate) {
        if (date < this.startDate) {
          this.endDate = this.startDate;
          this.startDate = date;
        } else {
          this.endDate = date;
        }
      } else {
        this.startDate = '';
        this.endDate = '';
      }
      this.init();
    },
    confirm(e) {
      let startDate;
      let endDate;
      if (e.range.before.length !== 0) {
        startDate = this.removeLeadingZero(e.range.before);
      }
      if (e.range.after.length !== 0) {
        endDate = this.removeLeadingZero(e.range.after);
      }
      if (startDate === undefined && endDate === undefined) return;
      if (startDate === undefined || endDate === undefined) {
        this.startDate = (startDate || endDate);
      }
      this.startDate = startDate < endDate ? startDate : endDate;
      this.endDate = startDate > endDate ? startDate : endDate;
      this.init();
    },
    removeLeadingZero(dateString) {
      // 去掉字符串前面的零
      return dateString.replace(/(\b)0+(\d)/g, '$1$2');
    }
  },
  computed: {
    getItemClass() {
      return (date) => {
        let classes = '';
        if (date === this.startDate && date === this.endDate) {
          classes += 'selected-date start-date end-date';
        } else if (date === this.startDate) {
          classes += 'selected-date start-date';
        } else if (date === this.endDate) {
          classes += 'selected-date end-date';
        } else if (
            (this.startDate && date > this.startDate && date < this.endDate) ||
            (this.endDate && date > this.endDate && date < this.startDate)
        ) {
          classes += 'between-dates';
        }
        return classes;
      };
    }


  }
}
</script>

<style lang="scss">
.show-calendar-banner {
  background-image: url("https://gw.alicdn.com/imgextra/i4/O1CN01GvBxMi1kwAw8Y1OXb_!!6000000004747-0-tps-1500-414.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 26.1333333vmin;
  width: 100%;
}

.show-calendar-main {
  width: 100%;
  background-image: linear-gradient(#fff, #f5f6f7 52vmin, #f5f6f7);
  border-radius: 3.2vmin 3.2vmin 0 0;
  margin-top: -1.6vmin;
  min-height: 90vh;
  overflow: hidden;
  z-index: 999;

  .filter-panel-wrap {
    width: 100%;
    display: flex;
    height: 15.3333333vmin;

    .scroll-view {
      white-space: nowrap;
      width: 86%;
      height: 100%;
      margin-left: 2.4vmin;

      .calendar-bar {
        display: flex;
        margin-top: 10px;
        padding-right: 5px;
        width: 100%;

        .scroll-view-item {
          padding: 5px 0;
          align-items: center;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          height: 100%;
          justify-content: center;
          width: 17.333333vmin;

          .week {
            color: #5f6672;
            font-size: 2.6666vmin;
          }

          .day {
            color: #2e333e;
            font-size: 3.7333333vmin;
            font-weight: bold;
            line-height: 50rpx;
          }
        }

        .selected-date {
          background-color: rgb(250, 229, 237);
        }

        .start-date {
          border-bottom-left-radius: 1.6vmin;
          border-top-left-radius: 1.6vmin;
        }

        .end-date {
          border-bottom-right-radius: 1.6vmin;
          border-top-right-radius: 1.6vmin;
        }

        .between-dates {
          background-color: rgb(252, 246, 250);
        }
      }

    }
  }
}
</style>
